<template>
  <div class="search-box">
    <el-form label-position="left" :label-width="labelWidth" @keyup.enter.native="onSearch()" @submit.native.prevent>
      <div class="ordinary-box">
        <el-row :gutter="20" class="ordinary-row">
          <el-col :span="6" :xs="24" :sm="12" :md="6" v-for="(item, index) in state.options" :key="index" style="margin: 5px 0">
            <el-form-item :label="item.label">
              <el-input
                v-if="item.element == 'input'"
                v-model="listQuery[item.prop]"
                v-bind="item.option"
                clearable
                size="default"
              ></el-input>
              <el-select
                v-if="item.element == 'select'"
                v-model="listQuery[item.prop]"
                v-bind="item.option"
                clearable
                size="default"
              >
                <el-option v-for="optionInfo in item.selectOption" :key="optionInfo.value" :label="optionInfo.label" :value="optionInfo.value">
                </el-option>
              </el-select>
              <el-date-picker
                size="default"
                v-if="item.element == 'dateRange'"
                v-model="state.rangeTime"
                range-separator="至"
                :type="item.attr.type || 'daterange'"
                :format="item.attr.format || 'YYYY-MM-DD'"
                :value-format="item.attr.valueFormat || 'YYYY-MM-DD'"
                clearable
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="
                  (options:any) => {
                    changeRangeTime(options, item);
                  }
                "
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="searchBtn">
          <el-button type="primary" size="default" @click="onSearch()"
            ><el-icon><ele-Search /></el-icon>查询</el-button
          >
          <el-button @click="resetSearch" size="default"
            ><el-icon><ele-RefreshRight /></el-icon>重置</el-button
          >
          <el-button @click="showSenior" size="default" v-show="formOption && formOption.length > 4"
            >高级搜索<el-icon style="margin-left: 5px"
              ><ele-ArrowUp v-show="state.isSeniorSearch === true" /><ele-ArrowDown v-show="state.isSeniorSearch === false"
            /></el-icon>
          </el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="searchForm">
import { reactive, onMounted } from 'vue';

// 定义父组件传过来的值
const props = defineProps({
	listQuery: {
		type: Object,
		default: () => {},
	},
	formOption: {
		type: Object,
		default: () => {},
	},
	labelWidth: {
		type: String,
		default: () => 'auto',
	},
});

// 定义变量内容
const state = <any>reactive({
	isSeniorSearch: false,
	options: [],
	rangeTime: [],
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['onSearch', 'resetSearch']);

// 页面加载时
onMounted(() => {
	init();
});

// 初始化配置
const init = () => {
	if (props.formOption && props.formOption.length > 4) {
		state.options = props.formOption.slice(0, 4);
	} else {
		state.options = JSON.parse(JSON.stringify(props.formOption));
	}
};

// 显示高级搜索
const showSenior = () => {
	if (state.isSeniorSearch === false) {
		state.options = JSON.parse(JSON.stringify(props.formOption));
		state.isSeniorSearch = true;
	} else {
		state.options = props.formOption.slice(0, 4);
		state.isSeniorSearch = false;
	}
};

// 搜索
const onSearch = () => {
	emit('onSearch');
};

// 重置
const resetSearch = () => {
	emit('resetSearch');
};

// 时间范围选择
const changeRangeTime = (options: any, item: any) => {
	props.listQuery[item.prop[0]] = options ? options[0] : '';
	props.listQuery[item.prop[1]] = options ? options[1] : '';
};
</script>

<style scoped lang="scss">
.search-box {
	background: var(--el-color-white);
	border-radius: 4px;
	border: 1px solid var(--el-border-color-light, #ebeef5);
	margin-bottom: 15px;
	padding: 15px;
}
.el-form-item .el-select {
	width: 100%;
}
.ordinary-box {
	display: flex;
	justify-content: space-between;
	.ordinary-row {
		width: calc(100% - 320px);
		display: flex;
		flex-wrap: wrap;
	}
}
.searchBtn {
	width: 300px;
	text-align: right !important;
	margin: 5px 0;
}
.senior-box {
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	position: relative;
	padding-bottom: 8px;
	.search-condition {
		background-color: #fff;
		padding: 14px;
		margin-top: 6px;
		border: 1px solid #adcdff;
		.condition-header {
			display: flex;
			justify-content: space-between;
		}
		.condition-box {
			position: relative;
			padding: 8px 0;
			max-height: 130px;
			overflow-y: auto;
			overflow-x: hidden;
			.condition-item {
				margin-top: 8px;
			}
		}
		.condition-btn {
			margin-top: 20px;
			display: flex;
			justify-content: center;
		}
	}
	.empty-cond-box {
		text-align: center;
		img {
			width: 106px;
			height: 99px;
		}
		.title-box {
			font-size: 13px;
			.split-bol {
				display: inline-block;
				color: #eee;
			}
			.add-btn {
				display: inline-block;
			}
		}
	}
	.arrow-box {
		position: absolute;
		right: 37px;
		top: -15px;
		// z-index: 12;
		img {
			height: 13px;
			width: 26px;
		}
	}
}
</style>
